<template>
  <div class="view-container">
    <header class="view-header">
      <div class="header-container">
        <div class="header-title">
          <i class="el-icon-s-grid"></i>
          <span>流程监控</span>
        </div>
        <div class="header-form">
          <!--搜索-->
          <!--          <el-form :inline="true"  class="demo-form-inline">
                      <el-form-item label="请假人名">
                        <el-input v-model="pageuser.name" placeholder="请假人名"></el-input>
                      </el-form-item>


                      <el-form-item label="状态">
                        <el-select v-model="pageuser.letterState" placeholder="状态">
                          <el-option
                            v-for="item in seleData"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            :disabled="item.disabled">
                          </el-option>
                        </el-select>
                      </el-form-item>


                      <el-form-item>
                        <el-button type="primary" @click="fetchData">查询</el-button>
                      </el-form-item>
                    </el-form>-->

          <div class="header-form-item">
            <el-select v-model="searchForm.letterState" placeholder="状态" @change="fetchData">
              <el-option v-for="item in stateList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>

          <!--综合审批类型-->
          <div class="header-form-item">
            <el-select v-model="searchForm.type" placeholder="综合审批类型">
              <el-option v-for="item in approveTypes"
              :key="item.value" :value="item.value" :label="item.label"
              ></el-option>
            </el-select>
          </div>

          <!--申请人-->
          <div class="header-form-item">
            <el-input v-model="searchForm.name" placeholder="申请人" @input="AntiShake"></el-input>
          </div>

        </div>
      </div>
    </header>

    <section>
      <el-table
        ref="table"
        :data="tableData"
        border
        stripe
      >
        <el-table-column prop="" label="申请人" align="center" width="100"/>
        <el-table-column prop="" label="原因" align="left">
          <template slot-scope="s">
            <el-link @click="showDetail(s.row.waiChuId)">{{s.row.waiChuShiYou}}</el-link>
          </template>
        </el-table-column>
        <el-table-column sortable prop="" label="申请类型" width="250" align="center"/>
        <el-table-column sortable prop="" label="申请时间" width="150" align="center"/>
        <el-table-column sortable prop="" label="状态" width="100" align="center">
          <template slot-scope="s">
            <el-tag :type="switchType(s.row.stateName)">{{s.row.stateName}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </section>
    <footer>
      <el-pagination
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        :page-size="page.size"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>

  </div>
</template>

<script>
  import zongHeAPI from '@/api/zongHe'
  import listMixin from '@/mixin/listMixin'
  import flowManagerListMixin from '@/mixin/flowManagerListMixin'
  export default {
    name: 'ZongHeMonitoring',
    mixins: [listMixin,flowManagerListMixin],
    data() {
      return {
        searchForm:{
          name:'',
          type:'',
          letterState:''
        },
        stateList:[],
        approveTypes:[
          {label:'日常事务使用审批(含风险,法务)',value:'日常事务使用审批(含风险,法务)'},
          {label:'外出携带印章审批',value:'外出携带印章审批'},
          {label:'日常事务使用审批',value:'日常事务使用审批'},
          {label:'工程项目审批',value:'工程项目审批'},
          {label:'工程项目使用审批(含风控,法务)',value:'工程项目使用审批(含风控,法务)'},
          {label:'外出携带印章审批(含主管负责人)',value:'外出携带印章审批(含主管负责人)'}
        ]
      }
    },
    created() {

    },
    methods: {
      showDetail(id){
        this.$router.push('/zonghe/approval-detail/' + id + '/' + false)
      },
      fetchData(){

      }
    }
  }
</script>

<style scoped lang="scss">

</style>
